<template>
	<div class="product">
		<!-- 搜索框 -->
		<div class="search">
			<template>
				<el-select v-model="searchValue"
					filterable
					clearable
					remote
					@change="searchTextChange"
					reserve-keyword
					@clear="clear"
					placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
					:remote-method="remoteMethod"
					:loading="loading">
					<el-option v-for="item in searchList"
						:key="item.sId"
						:label="item.name"
						:value="item.name">
					</el-option>
				</el-select>
			</template>
			<!-- 搜索按钮 -->
			<el-button type="primary"
				icon="el-icon-search"
				@click="onSearchButtonClick"
				plain></el-button>
			<!-- 添加按钮 -->
			<el-button type="primary"
				v-has="'add'"
				@click="addStu"
				:disabled="disabled">添加项目</el-button>
		</div>
		<!-- 班级选择 -->
		<div class="select-class">
			<!-- 框框 -->
			<el-form>
				<el-form-item label="选择班级:">
					<el-select v-model="classes"
						filterable
						@visible-change="classVisible"
						@change="classChange"
						placeholder="请选择">
						<el-option v-loading="selectLoading"
							label="全部"
							value="all"></el-option>
						<el-option :label="item"
							:value="item"
							v-for="(item, index) in classList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<!-- 导出excel -->
		<div class="exportExcel">
			<el-button icon="iconfont icon-excel"
				@click="exportExcel">导出excel数据</el-button>
		</div>
		<!-- 表格 -->
		<div class="stu-table">
			<el-table :data="stuData"
				v-loading="loading"
				border
				style="width: 100%">
				<el-table-column prop="headimgurl"
					align="center"
					label="头像"
					width="100">
					<!-- 插槽作用域 -->
					<template v-slot="scope">
						<el-avatar shape="square"
							:size="50"
							fit="fill"
							:src="scope.row.headimgurl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="name"
					align="center"
					width="120"
					label="姓名">
				</el-table-column>
				<el-table-column prop="degree"
					align="center"
					label="学历"> </el-table-column>
				<el-table-column prop="class"
					align="center"
					label="班级"> </el-table-column>
				<el-table-column prop="productUrl"
					align="center"
					label="项目"> </el-table-column>
				<el-table-column prop="cTime"
					align="center"
					label="创建时间"> </el-table-column>
				<el-table-column align="center"
					label="操作">
					<template v-slot="{ row }">
						<el-button type="primary"
							class="btn"
							icon="el-icon-view"
							@click="showStu(row)"
							v-has="'read'">查看</el-button>
						<el-button type="primary"
							class="btn"
							icon="el-icon-edit"
							@click="editStu(row)"
							v-has="'edit'">编辑</el-button>
						<el-button type="danger"
							v-has="'delete'"
							class="btn"
							icon="el-icon-delete"
							@click="deleteStu(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页器 -->
		<div class="pagination">
			<el-pagination background
				hide-on-single-page
				layout="prev, pager, next"
				:current-page.sync="currentPage"
				@current-change="changePage"
				:page-size="stuPageSize"
				:total="stuTotal">
			</el-pagination>
		</div>
		<!-- dialog弹出框 -->
		<qf-dialog></qf-dialog>
	</div>
</template>
<script>
	import dialog from "@/components/Dialog";
	import * as api from "../../../../api";
	import { mapState, mapActions, mapMutations } from "vuex";
	import qee from "qf-export-excel" //前端导出excel的方法
	export default {
		computed: {
			...mapState(["stuData", "loading", "stuTotal", "stuPageSize"]),
		},
		components: {
			"qf-dialog": dialog,
		},
		data() {
			return {
				params: {
					class: "",
					count: 5,
				},
				dataPage: "", // 页码
				dataCount: 5, // 每页展示的数量
				total: 0, // 总共的数据条数
				classList: [], //班级列表
				disabled: false,
				selectLoading: true,
				classes: "", //select绑定的班级
				searchList: [],
				searchValue: "",
				blurSearchValue: "",
				list: [],
				currentPage: 1,
			};
		},
		created() {
			this.GET_STULIST(); //获取学员数据列表
		},
		methods: {
			...mapActions(["GET_STULIST"]),
			...mapMutations([
				"SHOW_DIALOG",
				"CHANGE_DIALOG_TITLE",
				"SET_CURRENT_ROW",
				"SET_STU_DATA",
			]),

			// 分页器页码发生改变的时候触发的事件
			changePage(page) {
				//判断搜索框是否有值,如果有,就展示搜索结果的分页
				if (this.searchValue) {
					api.searchStuApi(page, this.searchValue, null)
						.then(res => {
							this.SET_STU_DATA(res.data)
						})
				} else {
					//页码变更,传给后台,重新获取数据
					// console.log(page);
					this.GET_STULIST({ page });
				}

			},

			// 导出excel
			exportExcel() {
				let titleList = [
					{
						title: "头像地址",
						key: "headimgurl"
					},
					{
						title: "姓名",
						key: "name"
					},
					{
						title: "学历",
						key: "degree"
					},
					{
						title: "班级",
						key: "class"
					},
					{
						title: "项目地址",
						key: "productUrl"
					},
					{
						title: "创建时间",
						key: "cTime"
					},
				]

				qee(titleList, this.stuData, "2104班级信息")
			},
			// 班级选择框展开/收起触发的事件
			classVisible(isVisible) {
				//展开选择器的时候,loading变为ture
				this.selectLoading = true;
				//展开的时候需要获取数据
				//调用获取列表的方法
				// console.log(isVisible);
				if (isVisible) {
					//下拉框出现了
					//发送请求,获取班级列表
					api.getClassesApi().then((res) => {
						// console.log(res);
						this.classList = res.data.data;
						// console.log(this.classList);
						this.selectLoading = false;
					});
				}
			},
			// 选择班级
			classChange(query) {
				// console.log(query);
				//query就是选中的option
				//1.select展开的时候 需要展示所有的班级列表
				//2.选中班级列表的时候,要更新表格
				// console.log(query);
				//调用早已经封装好的GET_STULIST,传递班级就可以了
				// console.log(query);
				//当query等于all的时候,表示要展示所有的班级
				if (query === "all") {
					query = ""; //将query重新赋值为空 因为不传的话 后台就默认返回所有数据
				}
				this.GET_STULIST({ classes: query });
			},
			onSearchButtonClick() {
				// 点击搜索按钮
				// console.log(this.searchValue);
				api.searchStuApi(null, this.searchValue, null).then((res) => {
					this.SET_STU_DATA(res.data);
				});
			},
			//查看学员信息
			showStu(row) {
				//设置当前行的信息
				this.SET_CURRENT_ROW(row);
				this.$router.push({ path: '/studentManager/profill' })
			},
			// 搜索框失去焦点 保持输入框的内容
			// 编辑学员
			editStu(row) {
				//修改dialog标题
				this.CHANGE_DIALOG_TITLE("编辑学员信息");
				//显示dialog
				this.SHOW_DIALOG();
				// console.log(row);
				//将当期这行的数据回显到dialog弹出框中 通过vuex修改currentRow的值
				this.SET_CURRENT_ROW(row);
			},
			// 删除学员
			deleteStu(row) {
				// console.log(row);
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						api.delStuApi(row.sId).then((res) => {
							if (res.data.state) {
								//删除成功
								this.GET_STULIST(); //更新列表
								this.$message({
									type: "success",
									message: "删除成功!",
								});
							} else {
								//删除失败 这条数据已经被别人删除了
								this.$message.error("删除失败,数据不存在");
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "warning",
							message: "已取消删除",
						});
					});
			},
			// 增加学员
			addStu() {
				//修改dialog标题
				this.CHANGE_DIALOG_TITLE("增加学员信息");
				// 弹出dialog
				this.SHOW_DIALOG();
			},
			clear() {
				//情况输入框内容的时候,表格应该显示所有的内容
				// console.log(currentPage);
				this.currentPage = 1;
				// console.log(this.currentPage);
			},
			// 搜索框选中值发生变化的事件
			searchTextChange(searchText) {
				// console.log(searchText);
				//发送请求,更新列表
				//更新列表
				api.searchStuApi(null, searchText, null).then((res) => {
					this.currentPage = 1;//让分页器的数值初始化
					this.SET_STU_DATA(res.data); //vuex中更新表格数据的方法
				});
			},
			remoteMethod(query) {
				// 键盘弹起的时候获取输入值
				// console.log(query);
				this.searchValue = query;
				//向后台发起请求
				api.searchStuApi(null, query, null).then((res) => {
					// console.log(res);
					// console.log(res.data.data);
					//数组去重
					let norepeat = [];
					// let flag = true;
					for (let i = 0; i < res.data.data.length; i++) {
						let flag = true;
						for (let k = 0; k < norepeat.length; k++) {
							if (norepeat[k].name === res.data.data[i].name) {
								flag = false;
								break;
							}
						}
						if (flag) {
							norepeat.push(res.data.data[i]);
						}
					}
					// console.log(norepeat);
					this.searchList = norepeat;
				});
			},
			mounted() {
				// 页面加载 获取表格数据
			},
		},
	};
</script>
<style scoped lang="less">
.search {
	line-height: 60px;
	text-align: left;
	margin: 20px 0;
	/deep/ .el-input__inner {
		width: 300px;
	}
}

.select-class {
	line-height: 40px;
	text-align: left;
	margin-bottom: 20px;
}
.stu-table .btn {
	width: 65px;
	height: 25px;
	padding: 0;
}
.pagination {
	margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
	color: green;
	font-size: 20px;
	margin-right: 3px;
}

.exportExcel .el-button {
	padding: 4px 7px;
	float: right;
}
.exportExcel {
	margin-bottom: 10px;
	overflow: hidden;
}
</style>
